<template>
  <div class="toolbar-wrap">
    <div class="header">
      <div class="header-left">Pick</div>
      <div class="header-right">
        <span class="iconfont icon-setting_line"></span>
        <span class="iconfont icon-close_line" @click="closeToolbar"></span>
      </div>
    </div>
    <div class="content">
      <div class="sub-title">
        <span class="iconfont icon-star_arc_line"></span>
        筛选
      </div>
      <div class="menu">
        <div class="menu-item" v-for="(a, b) in taskList" :key="b">
            <div 
              class="list-item" 
              :class="{ 
                active: i == chooseIndex[b]
              }"
              @click="changeType(b, i)"
              v-for="(v, i) in menuList[b]" 
              :key="i">
              {{ v.text }}
            </div>
        </div>
      </div>
      <div class="sub-title">
        <span class="iconfont icon-book_2_line"></span>
        书本列表
      </div>
      <div class="book-box">
        <div class="book-item" v-for="(v, i) in bookList" :key="i" @click="chooseOne(v)">{{ v.showName }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import { useEvent } from "../../hooks/useEvent"
// import { store } from "../../store/index"
import { getStageList, getGradeList, getPublishList, getBookList } from "../../api/index"
const { closeToolbar } = useEvent()

const taskList = reactive(["stage", "grade", "publish"])
const menuList = ref<any[]>([])
const bookList = ref<BookItem[]>([])
const chooseIndex = reactive([0, 0, 0])

const getList = async (step=-1) => {
  if (step == -1) {
    const r = await getStageList()
    menuList.value[0] = r.data.map(v => ({value: '', text: v}))
  }
  if (step <= 0) {
    const g = await getGradeList({ Stage: menuList.value[0][chooseIndex[0]].text })
    menuList.value[1] = Object.keys(g.data).map(v => ({value: v, text: g.data[v]}))
  }
  if (step <= 1) {
    const p = await getPublishList({ gradeId: menuList.value[1][chooseIndex[1]]?.value || "" })
    menuList.value[2] = p.data.map(v => ({value: v.id, text: v.publisherName}))
  }
  const bookParams = { 
    gradeName: menuList.value[1][chooseIndex[1]]?.text || "",
    publisherId: menuList.value[2][chooseIndex[2]].value,
    page: 1,
    limit: 99
  }
  const b = await getBookList(bookParams)
  bookList.value = b.data.list
}

const changeType = (type, i) => {
  chooseIndex[type] = i
  getList(type)
}

const chooseOne = (v: BookItem) => {
  // const bookId = v.id
  // const bookName = v.showName
  // store.set("book.bookId", bookId)
  // store.set("book.bookName", bookName)
  // Book.$patch({ bookId, bookName })
  // Book.changeBook(bookId, bookName)
}

// 监听Book状态
// Book.$subscribe((args, state) => {
//   console.log("args", args)
//   console.log("state", state)
// })

onMounted(() => {
  getList()
})
</script>

<style lang="less" scoped>
.toolbar-wrap {
  width: 100vw;
  height: 100vh;
}
.header {
  width: 100%;
  height:35px;
  background-color: #282C34;
  -webkit-app-region: drag;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding-left: 12px;
  box-sizing: border-box;
  .header-left {
    font-size: 20px;
    font-weight: 500;
  }
  .header-right {
    display: flex;
    -webkit-app-region: none;
    span {
      height:35px;
      width: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .2s;
      &:hover {
        background-color: #C42B1C;
      }
    }
  }
}
.content {
  height: calc(100vh - 35px);
  padding: 12px;
  box-sizing: border-box;
  .sub-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #fff;
  }
  .menu {
    display: flex;
    flex-direction: column;
    margin-left: 12px;
    .menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      font-size: 14px;
      overflow-x: auto;
      &::-webkit-scrollbar { 
        width: 0 !important;
        height: 0;
      }
      .list-item {
        display: flex;
        gap: 12px;
        padding: 2px 6px;
        margin-bottom: 12px;
        cursor: pointer;
        border-radius: 4px;
        flex-shrink: 0;
        &.active {
          // background-color: red;
          background-color: #383c46;
        }
      }
    }
  }
}

.book-box {
  height: 260px;
  overflow-y: auto;
  color: #fff;
  font-size: 15px;
  margin-left: 12px;
  // background-color: rebeccapurple;
  &::-webkit-scrollbar { 
    width: 0 !important;
    height: 0;
  }
  .book-item {
    border-radius: 8px;
    padding: 4px 6px;
    background-color: #383c46;
    transition: all .2s;
    cursor: pointer;
    &:not(:last-child){
      margin-bottom: 8px;
    }
    &:hover {
      background-color: #4c5563;
    }
  }
}
</style>